<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.keyword" placeholder="详细地址" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="func_handleSearch" plain>搜索</el-button>
            </div>
			<el-table :data="goodsTableData" row-key="id" border  header-cell-class-name="table-header" class="table" @row-click="func_trClick">
                <el-table-column prop="id" label="ID" width="55" align="center" v-if="false" />
				<el-table-column label="序号" width="80" align="center"><template #default="scope">
						{{scope.$index + 1}}
				</template></el-table-column>
                <el-table-column prop="urlPic" label="缩略图">
                    <template #default="scope">
                        <el-image :src="scope.row.urlPic" />
                    </template>
                </el-table-column>
                <el-table-column prop="productName" label="商品名称" />
                <el-table-column prop="productBoardName" label="品牌名称" />
                <el-table-column prop="price" label="价格" />
                <el-table-column prop="points" label="积分兑换" />
                <el-table-column prop="stocks" label="库存" v-if="false"/>
                <el-table-column label="商品分类" >
                    <template #default="scope">
                        <el-tag class="mr10" type="success" v-for="item in scope.row.productClassifyName"> {{item}} </el-tag>
                    </template>
                </el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
					:page-size="query.pageSize" :total="dataTotal" @current-change="func_handlePageChange"></el-pagination>
			</div>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { findProductInfoListPage, } from '../api/hairmanager/products';

export default {
    name: "goodsSelector",
    components: {},
	props:{
		selectValue: Object
	},
	emits: ["ProductData"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("170px");
        const loadFlg = ref(false);
        let query = reactive({
            isPublish: 2011,
            keyword: '',
            pageNum: 1,
            pageSize: 10,
        });
        const goodsTableData = ref([]);
        const dataTotal = ref(0);
		// =========================================================================================
        // 获取主表格数据
        const func_getData = () => {
            goodsTableData.value = [];
            findProductInfoListPage(query).then((res)=>{
                goodsTableData.value = res.data.list;
                dataTotal.value = res.data.total;
            });
        };
        /**
         * @name 条件查询操作
         */
        const func_handleSearch = () => {
            query.pageNum = 1;
            func_getData();
        };
        /**
         * @name 主表格分页查询
         */
        const func_handlePageChange = (val) => {
            query.pageNum = val;
            func_getData();
        };
		const func_trClick = (row, event, column) => {
			cex.emit('ProductData',  {state: 1,  id: row.id, product:row.productName, points:row.points, price:row.price,});
		};
        // 扩展业务处理 ========================================================================================= START
        // 扩展业务处理 ========================================================================================= END
        // =========================================================================================================
        // 业务数据监听
        watch(() => props.selectValue, (val) => {
            query.memberId = val['id'];
            val['load'];
            func_getData()
        },{deep: true, immediate: true});
        return {
            query, goodsTableData, dataTotal, 
            func_getData, func_handleSearch, func_handlePageChange, func_trClick,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 300px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.green {
    color: #67c23a;
}
.blue {
    color: #1684FC;
}
.mr10 {
    margin-right: 10px;
}
</style>